// Body
body.dark {
	background: $space;
}

body.light {
	background: #fff;
}

// Type
.theme_type--brand {
	color: $brand;
}

.theme_type--dark {
	color: #fff;
}

.theme_type--grey {
	color: $grey-light;
}

.theme_type--kinda-white {
	color: rgba(255, 255, 255, 0.7);
}

.theme_type--light {
	color: $grey;
}

.theme_type--space {
	color: $space;
}

// Box
.theme_box--brand {
	background-color: $brand;
}

.theme_box--space {
	background-color: $space;
}

.theme_box--dark-strong {
	background-color: $space-b;
}

.theme_box--dark {
	background-color: $space-grey;
}

.theme_box--dark-medium {
	background-color: $grey-dark;
}

.theme_box--light {
	background-color: $grey-bg;
}

.theme_box--white {
	background-color: #fff;
}

.code--light {
	border: 1px solid $grey-smoke;
}

.code--dark {
	border: 1px solid $grey-dark;
	color: #fff;
	background: $space-b;
}

// Forms

// Selects
.select--theme-light {
	border: 1px solid $grey-smoke;

	&:after {
		border-top: 1.5px solid $space;
		border-right: 1.5px solid $space;
	}
}

.select--theme-dark {
	border: 1.5px solid $grey-dark;
	background-color: $space-b;

	&:hover {
		border-color: $grey;
	}

	&:after {
		border-top: 1.5px solid #fff;
		border-right: 1.5px solid #fff;
	}

	select {
		color: #fff;
	}
}

// Inputs
.input--dark,
.input-child--dark input {
	color: #fff;
	border: 1.5px solid $grey-dark;
	background-color: $space-b;
	@include placeholder($grey-light);

	input {
		@include placeholder($grey-light);
	}

	&[disabled],
	&.disabled {
		background: $grey-bg;
		color: $grey-smoke-dark;
		@include placeholder($grey-smoke-dark);
	}

	&:hover,
	&:focus {
		border-color: $grey;
	}
}

.input-child--dark[data-prefix] {
	&:before {
		background: $space-grey;
		color: #fff;
		border-right: 1.5px solid $grey-dark;
	}
}

// Table
.table--dark {
	td {
		border: 1px solid $space-grey;
	}

	table {
		background: $space;
		color: $grey-light;
	}

	th {
		background: $space-grey;
		color: $grey-light;
	}

	strong {
		color: #fff !important;
	}
}

.table--light {
	table {
		background: #fff;
		color: $grey;

		&:first-child {
			th {
				border-left: 1px solid $grey-smoke;
			}
		}

		&:last-child {
			th {
				border-right: 1px solid $grey-smoke;
			}
		}
	}

	td {
		border: 1px solid $grey-smoke;
		color: $grey;

		p {
			color: $space;
		}
	}

	th {
		background: $grey-bg;
		color: $grey-dark;
		border-left: 1px solid $grey-smoke;
		border-right: 1px solid $grey-smoke;

		@media screen and (min-width: $tablet) {
			border: 0;
		}
	}

	strong {
		color: $space !important;
	}
}
